<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<style type="text/css">
		
		* {
		  box-sizing: border-box;
		  margin: 0;
		  padding: 0;
		  font-weight: 300;
		}
		body {
		  color: white;
		}
		body ::-webkit-input-placeholder {
		  color: white;
		}
		.wrapper {
		  background: -webkit-linear-gradient(top right, #ffa366 0%, #d0d0d0 100%);
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		}
		
		.container {
		  max-width: 600px;
		  margin: 0 auto;
		  padding: 80px 0;
		  padding-top:200px; 
		  height: 400px;
		  text-align: center;
		}
		.container h1 {
		  font-size: 40px;
		  font-weight: 200;
		}
		form {
		  padding: 20px 0;
		  position: relative;
		  z-index: 2;
		}
		form input {		  
		  outline: 0;
		  border: 1px solid rgba(255, 255, 255, 0.4);
		  background-color: rgba(255, 255, 255, 0.2);
		  width: 250px;
		  border-radius: 3px;
		  padding: 10px 15px;
		  margin: 0 auto 10px auto;
		  display: block;
		  text-align: center;
		  font-size: 18px;
		  color: white;
		  transition-duration: 0.25s;
		  font-weight: 300;
		}
		form input:hover {
		  background-color: rgba(255, 255, 255, 0.4);
		}
		form input:focus {
		  background-color: white;
		  width: 300px;
		  color: #00aeae;
		}
		form button {
		  outline: 0;
		  background-color: white;
		  border: 0;
		  padding: 10px 15px;
		  color: #53e3a6;
		  border-radius: 3px;
		  width: 125px;
		  cursor: pointer;
		  font-size: 18px;
		}
		form button:hover {
		  background-color: #f5f7f9;
		}
		.cc{
			text-decoration: none;
			color: #53e3a6; 
		}
	</style>
<!--	<script  type="text/javascript"  src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
<!--	<script type="text/javascript">-->
<!--		function login() {-->
<!--			$.ajax({-->
<!--				type: 'post',-->
<!--				url: 'login',-->
<!--				data: {username:$("#username").val(),password:$("#password").val() },-->
<!--				success:function (data) {-->
<!--					if (data=="success"){-->
<!--						window.open("usercenter.html")-->
<!--					}else{-->
<!--						$("#err").html("账号或密码有错误")-->
<!--					}-->
<!--				}-->
<!--			})-->

<!--		}-->
<!--	</script>-->
</head>
<body>
	<script type="text/javascript">

		function check1(){
			{

				if(form.username.value == "")
				{
					alert("您还没有填写用户名！");
					form.username.focus();
					window.open("login.html");
				}
				if(form.password.value == "")
				{
					alert("您还没有填写密码！");
					myform.pass.focus();
					window.open("login.html");
				}
			}}


	</script>
	<div class="wrapper">
		<div class="container">
			<h1>Welcome</h1>
			
			<form name='form' class="form" method='post' th:action="@{/login}" onSubmit="return check()">
				<input type="text" placeholder="Username" name='username' id="username">
				<input type="password" placeholder="Password" name='password' id="password">
<!--				<p id="err"></p>-->
<!--				<input type="button" onclick="login()">-->
				<p th:text="${session.err}"></p>
				<button type="submit" id="login-button" name='submit' value='submit' onclick = "check1()";>Login</button>
				<button type="submit" id="register-button"><a href="register.html" th:href="@{/register.html}" target="_blank" class="cc">register</a></button>
			</form>
		</div>
	</div>
</body>
</html>
